<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="flex justify-between">
                <el-button type="primary" size="default" @click="handleAdd">新增</el-button>
            </div>
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="宠物等级" prop="level"></el-table-column>
                <el-table-column label="升级经验" prop="exp"></el-table-column>
                <el-table-column label="萌宠技能" prop="exp">
                    <template slot-scope="{row}">
                        <el-popover
                            placement="left"
                            width="400"
                            trigger="hover">
                                <div v-for="item in row.levelSkill" :key="item.id" class="flex items-center mb-4">
                                    <!-- <el-image :src="item.icon" fit="fill" style="max-width: 80px;max-height: 80px"></el-image> -->
                                    <img :src="item.icon" alt="" style="max-width: 80px;max-height: 80px">
                                    <div class="ml-4">
                                        <p>配置技能:：{{ item.name }}</p>
                                        <p>技能等级：{{ item.skill_level }}</p>
                                        <p>持续时长：{{ item.cool_down }}</p>
                                        <p>CD时长：{{ item.count }}</p>
                                    </div>
                                </div>
                                <div class="popoverHeight"  slot="reference">
                                    <div v-for="(item,index) in row.levelSkill" :key="item.id" class="flex mb-4">
                                        <p  v-if="index<3">{{item.name}}</p>
                                    </div>
                                </div>
                            </el-popover>
                        
                    </template>
                </el-table-column>
                <!-- <el-table-column label="持续时长" prop="cool_down"></el-table-column>
                <el-table-column label="CD时长" prop="count"></el-table-column>
                <el-table-column label="配置技能" prop="name"></el-table-column>
                <el-table-column label="技能等级" prop="skill_level"></el-table-column> -->

                <!-- <el-table-column label="升级横幅" prop="day"></el-table-column>
                <el-table-column label="横幅动态文案颜色" prop="inventory"></el-table-column>
                <el-table-column label="横幅基本文案颜色" prop="gift_id"></el-table-column> -->
                
                <el-table-column label="创建时间" prop="created_at"></el-table-column>
                
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
  
        <petRatingAddEditModal
            :dialogVisible.sync="dialogVisible"
            :title.sync="dialogTitle"
            :info="info"
            @updateTable="getTableData"
        ></petRatingAddEditModal>
    </div>
</template>
  
<script>
    import { petLevelList } from '@/api/petsManagement'
    import petRatingAddEditModal from './childComps/petRatingAddEditModal'
  	export default {
        name: 'petRating',
        components: {petRatingAddEditModal},
        data() {
            return {
                dialogTitle: 'add',
                dialogVisible: false,
                info: {},
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                options: []
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            updateTable(data) {
                console.log(data)
                this.title = data.title
                this.lower_picture = data.lower_picture
                this.high_picture = data.high_picture
                this.note = data.note
                this.sort = data.sort
                this.updateInfo = {
                    title: data.title,
                    id: data.id,
                    sort: data.sort,
                    lower_picture: data.lower_picture,
                    lower_frame: data.lower_frame,
                    high_picture: data.high_picture,
                    high_frame: data.high_frame,
                    note: data.note,
                    default_title: data.default_title,
                    lower_title: data.lower_title,
                    high_title: data.high_title,
                    lower_bg: data.lower_bg,
                    high_bg: data.high_bg,
                    default_picture: data.default_picture,
                    lower_collect_banner_id: data.lower_collect_banner_id,
                    high_collect_banner_id: data.high_collect_banner_id,
                    collect_special: data.collect_special,
                    
                }
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
                }
                const {data, code} = await petLevelList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.data
                    this.total = data.total
                }
                this.loading = false
        
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
            },
            handleEdit(row) {
                this.dialogVisible = true
                this.dialogTitle = 'edit'
                this.info = row
            },
            handleReset() {
                this.listQuery = {
                    page: 1,
                    perPage: 10
                }
                this.getTableData()
            },
            handleAdd() {
                this.dialogVisible = true
                this.dialogTitle = 'add'
            }
        }
    }
</script>
  
<style lang="scss" scoped>
.infoBox {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border: 1px solid #999999;
  border-radius: 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  box-sizing: border-box;
  padding-right: 30px;
  .info_1{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;

    .info_2{
      margin-top: 15px;
      display: flex;
      align-items: center;
	  position: relative;

      span{
        width: 180px;
        text-align: right;
      }
	  .tip{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 100%;
			left: 120px;
		}
    }
  }
}
.item {
    width: 100px;
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    .el-table {
        .cell {
            display: block !important;
        }
    }
    
}
.imageStyle {
    width: 120px;
}
</style>
  